<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <div style="display: flex;margin-right: 10px;float: left">
        <div class="addressTitle">
          发货地
        </div>
        <div style="flex: 1;">
          <treeselect v-model="queryParams.sendAddressId" :options="cityOptions" :show-count="true" placeholder="请选所在地"  style="width: 200px"/>
        </div>
      </div>
      <div style="display: flex;margin-right: 10px;float: left">
        <div class="addressTitle">
          收货地
        </div>
        <div style="flex: 1;">
          <treeselect v-model="queryParams.deliveryAddressId" :options="cityOptions" :show-count="true" placeholder="请选所在地"  style="width: 200px"/>
        </div>
      </div>
      <el-form-item label="物流单号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          placeholder="请输入物流单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同单号" prop="contractCode">
        <el-input
          v-model="queryParams.contractCode"
          placeholder="请输入合同单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="采购单号" prop="purchaseCode">
        <el-input
          v-model="queryParams.purchaseCode"
          placeholder="请输入采购单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="货运单号" prop="logisticsNo">
        <el-input
          v-model="queryParams.logisticsNo"
          placeholder="请输入货运单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="到货日期" prop="goodsArrivedTime">
        <el-date-picker clearable
          v-model="queryParams.goodsArrivedTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择到货日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="清关公司" prop="qgEntId">
        <el-select v-model="queryParams.qgEntId" filterable clearable placeholder="请选择清关公司">
          <el-option
            v-for="item in entOptions"
            :key="item.id"
            :label="item.entName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收货人" prop="consigneeId">
        <el-select v-model="queryParams.consigneeId" filterable placeholder="请选择收货人" clearable>
          <el-option
            v-for="dict in userList"
            :key="dict.userId"
            :label="dict.nickName"
            :value="dict.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流条款" prop="logisticsTermsId">
        <el-select v-model="queryParams.logisticsTermsId" filterable placeholder="请选择物流条款" clearable>
          <el-option
            v-for="dict in termList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流方式">
        <el-select v-model="queryParams.logisticsModule" placeholder="请选择物流方式" clearable>
          <el-option
            v-for="dict in dict.type.wms_logistics"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付类型" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="请选择支付类型" clearable>
          <el-option
            v-for="dict in dict.type.wms_pay_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.wms_logistics_zz_order_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['wms:logisticsOrder:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleSend"
          v-hasPermi="['wms:purchaseOrder:send']"
        >发货</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="logisticsOrderList">
      <el-table-column type="index" label="序号" width="55" align="center">
        <template slot-scope="scope">
          {{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index +1}}
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="发货城市">
                  {{props.row.sendName}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发货地址详情">
                  {{props.row.sendAddress}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="收货城市">
                  {{props.row.deliveryName}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收货地址详情">
                  {{props.row.deliveryAddress}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12" v-if="props.row.cqDay">
                <el-form-item label="超期时间">
                  超期{{props.row.cqDay}}天
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="清关公司" v-if="props.row.qgEntName">
                  {{props.row.qgEntName}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="商品数量">
                  {{props.row.productNum}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付类型">
                  <dict-tag :options="dict.type.wms_pay_type" :value="props.row.payType"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="props.row.payType === '1'">
              <el-col :span="12">
                <el-form-item label="先款比例">
                  <span>{{ props.row.prefixPayRate }}</span>
                  <span style="margin-left: 10px">备注：{{props.row.prefixRemark}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="进度款比例">
                  <span>{{ props.row.processPayRate }}</span>
                  <span style="margin-left: 10px">备注：{{props.row.processRemark}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="props.row.payType === '1'">
              <el-col :span="12">
                <el-form-item label="尾款比例">
                  <span>{{ props.row.tailPayRate }}</span>
                  <span style="margin-left: 10px">备注：{{props.row.tailRemark}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="尾款支付时间">
                  <span>货到后{{ props.row.tailPayTime }}天付款</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="物流金额">
                  <span>{{ props.row.logisticsPrice }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="已支付金额">
                  <span>{{ props.row.payPrice }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="物流单号" align="center" prop="orderCode">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleLook(scope.row)">{{ scope.row.orderCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="合同单号" align="center" prop="contractCode" :show-overflow-tooltip="true"/>
      <el-table-column label="采购单号" align="center" prop="purchaseCode" :show-overflow-tooltip="true"/>
      <el-table-column label="物流方式" align="center" prop="logisticsModule">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.wms_logistics" :value="scope.row.logisticsModule"/>
        </template>
      </el-table-column>
      <el-table-column label="物流条款" align="center" prop="logisticsTerms" :show-overflow-tooltip="true"/>
      <el-table-column label="货运单号" align="center" prop="logisticsNo" />
      <el-table-column label="箱体编号" align="center" prop="boxCode" />
      <el-table-column label="到货日期" align="center" prop="goodsArrivedTime" width="180"/>
      <el-table-column label="收货人" align="center" prop="consigneeStr" :show-overflow-tooltip="true"/>
      <el-table-column label="运费金额" align="center" prop="logisticsPrice" />
      <el-table-column label="状态" align="center" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.wms_logistics_zz_order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-if="scope.row.status === '6'"
            v-hasPermi="['wms:logisticsOrder:add']"
            @click="handleRefreshAudit(scope.row)"
          >重新审核</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-if="scope.row.status === '5' || scope.row.status === '6'"
            @click="handleDelete(scope.row)"
            v-hasPermi="['wms:logisticsOrder:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status === '0' && scope.row.isQg === 'Y'"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['wms:logisticsOrder:edit']"
          >清关</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status === '0' && scope.row.isQg === 'N'"
            @click="handleArrivaed(scope.row)"
            v-hasPermi="['wms:logisticsOrder:edit']"
          >确认到货</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-if="scope.row.status === '0'"
            @click="handleSbError(scope.row)"
          >上报异常</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-else-if="scope.row.status === '1'"
            @click="handleJcError(scope.row)"
          >解除异常</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加物流单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="货运单号" prop="logisticsNo">
              <el-input v-model="form.logisticsNo" placeholder="请输入货运单号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="箱体编号" prop="boxCode">
              <el-input v-model="form.boxCode" placeholder="请输入箱体编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="运费金额" prop="logisticsPrice">
              <el-input v-model="form.logisticsPrice" placeholder="请输入运费金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流条款" prop="logisticsTermsId">
              <el-select v-model="form.logisticsTermsId" filterable @change="handleTermChange" placeholder="请选择物流条款" clearable>
                <el-option
                  v-for="dict in termList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="物流方式">
              <el-radio-group v-model="form.logisticsModule">
                <el-radio
                  v-for="dict in dict.type.wms_logistics"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人" prop="consigneeIdArr">
              <el-select v-model="form.consigneeIdArr" filterable multiple placeholder="请选择收货人" clearable>
                <el-option
                  v-for="dict in userList"
                  :key="dict.userId"
                  :label="dict.nickName"
                  :value="dict.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货城市" prop="sendAddressId">
              <treeselect v-model="form.sendAddressId" :options="cityOptions" :show-count="true" placeholder="请选发货城市" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货城市" prop="deliveryAddressId">
              <treeselect v-model="form.deliveryAddressId" :options="cityOptions" :show-count="true" placeholder="请选发货城市" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货地址" prop="sendAddress">
              <el-input type="textarea" v-model="form.sendAddress" placeholder="请输入发货地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址" prop="deliveryAddress">
              <el-input type="textarea" v-model="form.deliveryAddress" placeholder="请输入收货地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="清关" prop="isQg">
              <el-radio-group v-model="form.isQg" @change="handleQgChange">
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.isQg == 'Y'">
            <el-form-item label="清关公司" prop="qgEntId">
              <el-select v-model="form.qgEntId" filterable clearable placeholder="请选择清关公司">
                <el-option
                  v-for="item in entOptions"
                  :key="item.id"
                  :label="item.entName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
<!--            <el-form-item label="预计到货日期" prop="goodsArrivedTime">-->
<!--              <el-date-picker clearable-->
<!--                              v-model="form.goodsArrivedTime"-->
<!--                              type="date"-->
<!--                              :picker-options="pickerOptions"-->
<!--                              value-format="yyyy-MM-dd"-->
<!--                              placeholder="选择预计到货日期" style="width: 100%">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
            <el-form-item label="预计到货时间" prop="goodsArrivedDay">
              <el-input v-model="form.goodsArrivedDay" placeholder="请输入天数">
                <template slot="append">
                  天
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="支付类型" prop="payType">
              <el-radio-group v-model="form.payType" @change="handlePayTypeChange">
                <el-radio
                  v-for="dict in dict.type.wms_pay_type"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="先款比例" prop="prefixPayRate" v-if="form.payType === '1'">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="form.prefixPayRate" @change="handlePrefixRate" placeholder="请输入先款比例" />
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.prefixRemark" :maxlength="255" placeholder="请输入先款备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="form.payType === '1'">
          <el-col :span="12">
            <el-form-item label="进度款比例" prop="processPayRate">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="form.processPayRate" placeholder="请输入进度款比例" />
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.processRemark" :maxlength="255" placeholder="请输入进度款备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尾款比例" prop="tailPayRate">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="form.tailPayRate" placeholder="请输入尾款比例" />
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.tailRemark" :maxlength="255" placeholder="请输入尾款备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="form.payType === '1'">
          <el-col :span="12" >
            <el-form-item prop="tailPayTime">
              <template slot="label">
                尾款支付时间
                <el-tooltip class="item" effect="dark" content="货到后几天付款，0代表货到立即付款" placement="bottom">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
              <el-input v-model="form.tailPayTime" placeholder="请输入货到几天后付款" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="箱体照片">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handlePicRemove"
            :on-success="handlePiceSuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg"
            list-type="picture"
            :file-list="fileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png格式图片。</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="合同附件">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handleConteactRemove"
            :on-success="handleConteactSuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg,.pdf"
            :file-list="contractFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png/pdf格式文件。</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="支付附件">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handlePayRemove"
            :on-success="handlePaySuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg,.pdf"
            :file-list="payFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png/pdf格式文件。</span>
            </div>
          </el-upload>
        </el-form-item>

        <h1>商品信息</h1>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleOrderProductAdd"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleSelectedProduct"
            >选择商品</el-button>
          </el-col>
        </el-row>
        <el-table :data="products" id="alterTable">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand" label-width="80px">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="商品类型">
                      <treeselect v-model="props.row.productType" :options="productTypeOptions" :show-count="true"
                                  placeholder="请选商品类型" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="指定厂家">
                      <el-select v-model="props.row.purchaseCompany" placeholder="请选择厂家" clearable filterable>
                        <el-option
                          v-for="item in entOptions"
                          :key="item.id"
                          :label="item.entName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="尺寸单位">
                      <el-select v-model="props.row.ccUnit" placeholder="请选择尺寸单位" clearable>
                        <el-option
                          v-for="dict in dict.type.wms_product_cc_unit"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="长度">
                      <el-input v-model="props.row.longWith" :maxlength="50" placeholder="请输入商品长度" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="宽度">
                      <el-input v-model="props.row.weight" :maxlength="50" placeholder="请输入商品宽度" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="高度">
                      <el-input v-model="props.row.height" :maxlength="50" placeholder="请输入商品高度" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="重量">
                      <el-input v-model="props.row.zl" :maxlength="50" placeholder="请输入商品重量" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="详情">
                  <el-input type="textarea" v-model="props.row.detail" placeholder="请输入详情" />
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品编码" header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productCode" placeholder="请输入商品编码"/>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productName" :maxlength="50" placeholder="请输入商品名称" />
            </template>
          </el-table-column>
          <el-table-column label="商品型号" header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.modal" :maxlength="50" placeholder="请输入商品型号" />
            </template>
          </el-table-column>
          <el-table-column label="计数单位" header-align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.unit" placeholder="请选择计数单位" clearable>
                <el-option
                  v-for="unit in unitArr"
                  :key="unit.id"
                  :label="unit.name"
                  :value="unit.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="商品数量" header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productNum" placeholder="请输入商品数量"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleOrderProductDelete(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 物流详情对话框 -->
    <el-dialog title="物流详情" :visible.sync="openLook" width="80%" append-to-body>
      <el-form>
        <el-form-item label="物流单号" >
          {{orderCode}}
        </el-form-item>

        <el-form-item label="箱体照片" v-if="accessoryList.length > 0">
          <el-upload
            action=""
            class="upload-demo"
            :disabled="true"
            :on-preview="handlePreview"
            list-type="picture"
            :file-list="accessoryList">
          </el-upload>
        </el-form-item>

        <el-form-item label="合同附件" v-if="contractAccessoryList.length > 0">
          <el-upload
            action=""
            class="upload-demo"
            :disabled="true"
            :on-preview="handlePreview"
            :file-list="contractAccessoryList">
          </el-upload>
        </el-form-item>

        <el-form-item label="支付附件" v-if="payAccessoryList.length > 0">
          <el-upload
            action=""
            class="upload-demo"
            :disabled="true"
            :on-preview="handlePreview"
            :file-list="payAccessoryList">
          </el-upload>
        </el-form-item>
      </el-form>
      <h1>商品信息</h1>
      <el-table :data="orderProductTable">
        <el-table-column label="序号" align="center" type="index" width="50"/>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="商品编码">
                    <span>{{ props.row.productCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品类型">
                    <span>{{ props.row.productTypeName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="计数单位">
                    <span>{{ props.row.unitName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尺寸单位">
                    <span>{{ props.row.ccUnitName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="尺寸">
                    <span v-if="props.row.longWith || props.row.weight || props.row.height">{{ props.row.longWith + '*' + props.row.weight + '*' + props.row.height }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="重量">
                    <span>{{ props.row.zl }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="交货期（厂家）">
                    <span>{{ props.row.manufacturerDelivery }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="交货期（买家）">
                    <span>{{ props.row.delivery }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="详情">
                <span>{{ props.row.detail }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
        <el-table-column label="商品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
        <el-table-column label="生产厂家" align="center" prop="scPurchaseCompanyName"/>
        <el-table-column label="商品数量" align="center" prop="productNum"/>
        <el-table-column label="成本" align="center" prop="oldOnlyPrice"/>
        <el-table-column label="单价" align="center" prop="onlyPrice"/>
        <el-table-column label="总价" align="center" prop="allPrice"/>
        <el-table-column label="状态" align="center" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.wms_order_product_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 选择商品对话框 -->
    <el-dialog title="选择商品" :visible.sync="openSelectedProduct" fullscreen append-to-body>
      <selected-product ref="selectedProduct" :filter-keys="filterKeys" :open-flag="openSelectedProduct"></selected-product>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSelectedProduct">确 定</el-button>
        <el-button @click="openSelectedProduct = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 清关对话框 -->
    <el-dialog title="清关" :visible.sync="openClear" width="80%" append-to-body>
      <el-form ref="formClear" :model="formClear" :rules="rulesClear" label-width="110px">
        <el-form-item label="物流单号">
          {{formClear.logisticsCode}}
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="物流方式">
              <dict-tag :options="dict.type.wms_logistics" :value="formClear.logisticsModule"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流条款">
              {{formClear.logisticsTerms}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="货运单号">
              {{formClear.logisticsNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="箱体编号">
              {{formClear.boxCode}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="清关公司">
              {{formClear.qgEntName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计到货日期">
              {{formClear.goodsArrivedTime}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
<!--            <el-form-item label="清关结束日期" prop="endTime">-->
<!--              <el-date-picker clearable-->
<!--                              v-model="formClear.endTime"-->
<!--                              type="date"-->
<!--                              :picker-options="pickerOptions"-->
<!--                              value-format="yyyy-MM-dd"-->
<!--                              placeholder="选择清关结束日期" style="width: 100%">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
            <el-form-item label="清关结束时间" prop="endDay">
              <el-input v-model="formClear.endDay" placeholder="请输入天数">
                <template slot="append">
                  天
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="headIdArr">
              <el-select v-model="formClear.headIdArr" filterable multiple placeholder="请选择负责人" clearable style="width: 100%">
                <el-option
                  v-for="dict in userList"
                  :key="dict.userId"
                  :label="dict.nickName"
                  :value="dict.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="清关附件">
          <el-upload
            class="upload-demo"
            :headers="uploadClearAccessory.headers"
            :action="uploadClearAccessory.url"
            :on-remove="handleClearRemove"
            :on-success="handleClearSuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg,.pdf"
            :file-list="clearFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png/pdf格式文件。</span>
            </div>
          </el-upload>
        </el-form-item>
        <h1>商品信息</h1>
        <el-table :data="orderProductTable">
          <el-table-column label="序号" align="center" type="index" width="50"/>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="商品编码">
                      <span>{{ props.row.productCode }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商品类型">
                      <span>{{ props.row.productTypeName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="计数单位">
                      <span>{{ props.row.unitName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="尺寸单位">
                      <span>{{ props.row.ccUnitName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :span="12">
                  <el-col :span="12">
                    <el-form-item label="尺寸">
                      <span v-if="props.row.longWith || props.row.weight || props.row.height">{{ props.row.longWith + '*' + props.row.weight + '*' + props.row.height }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="重量">
                      <span>{{ props.row.zl }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="交货期（厂家）">
                      <span>{{ props.row.manufacturerDelivery }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="交货期（买家）">
                      <span>{{ props.row.delivery }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="详情">
                  <span>{{ props.row.detail }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="商品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
          <el-table-column label="生产厂家" align="center" prop="scPurchaseCompanyName"/>
          <el-table-column label="商品数量" align="center" prop="productNum"/>
          <el-table-column label="成本" align="center" prop="oldOnlyPrice"/>
          <el-table-column label="单价" align="center" prop="onlyPrice"/>
          <el-table-column label="总价" align="center" prop="allPrice"/>
          <el-table-column label="状态" align="center" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_order_product_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClearForm" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 上报异常对话框 -->
    <el-dialog title="上报异常" :visible.sync="openError"  width="80%" append-to-body>
      <el-form ref="formError" :model="formError" :rules="rulesError" label-width="90px">
        <el-form-item label="预计结束时间" prop="preEndTime">
          <el-date-picker clearable
                          v-model="formError.preEndTime"
                          type="date"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd"
                          placeholder="选择预计到货日期" style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="负责人" prop="headId">
          <el-select v-model="formError.headId" filterable placeholder="请选择负责人" clearable>
            <el-option
              v-for="dict in userList"
              :key="dict.userId"
              :label="dict.nickName"
              :value="dict.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常信息" prop="errorMsg">
          <el-input type="textarea" v-model="formError.errorMsg" placeholder="请输入异常信息" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitErrorForm" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 解除异常对话框 -->
    <el-dialog title="解除异常" :visible.sync="openJcError"  width="80%" append-to-body>
      <el-form label-width="90px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="预计结束时间">
              {{formError.preEndTime}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人">
              {{formError.headStr}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="异常信息">
          {{formError.errorMsg}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitHandleErrorForm" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 可发货采购单对话框 -->
    <el-dialog title="采购发货" :visible.sync="openPurchaseSend"  width="80%" append-to-body>
      <el-table v-loading="purchaseLoading" :data="purchaseOrderList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="支付类型">
                <dict-tag :options="dict.type.wms_pay_type" :value="props.row.payType"/>
              </el-form-item>
              <el-row :gutter="10" v-if="props.row.payType === '1'">
                <el-col :span="12">
                  <el-form-item label="先款比例">
                    <span>{{ props.row.prefixPayRate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="进度款比例">
                    <span>{{ props.row.processPayRate }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10" v-if="props.row.payType === '1'">
                <el-col :span="12">
                  <el-form-item label="尾款比例">
                    <span>{{ props.row.tailPayRate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尾款支付时间">
                    <span>货到后{{ props.row.tailPayTime }}天付款</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="采购金额">
                    <span>{{ props.row.purchasePrice }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="已支付金额">
                    <span>{{ props.row.payPrice }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="采购单号" align="center" prop="orderCode">
          <template slot-scope="scope">
            <el-link type="primary" @click="handlePurchaseLook(scope.row)">{{ scope.row.orderCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="合同编码" align="center" prop="contractCode" />
        <el-table-column label="联系人" align="center" prop="nickName" />
        <el-table-column label="生产完成率" align="center" prop="successRate" />
        <el-table-column label="发货率" align="center" prop="fhRate" />
        <el-table-column label="完成率" align="center" prop="rate" />
        <el-table-column label="联系人" align="center" prop="nickName" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.wms_purchase_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      </el-table>
      <pagination
        v-show="purchaseTotal>0"
        :total="purchaseTotal"
        :page.sync="queryParamsPurchase.pageNum"
        :limit.sync="queryParamsPurchase.pageSize"
        @pagination="getPurchaseList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPurchaseSend" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 采购详情对话框 -->
    <el-dialog title="采购详情" :visible.sync="openPurchaseLook" width="80%" append-to-body>
      <el-form>
        <el-form-item label="采购单号" >
          {{orderCode}}
        </el-form-item>

        <el-form-item label="合同附件" v-if="fileList.length > 0">
          <el-upload
            action=""
            class="upload-demo"
            :disabled="true"
            :on-preview="handlePreview"
            :file-list="fileList">
          </el-upload>
        </el-form-item>

        <el-form-item label="支付附件" v-if="payFileList.length > 0">
          <el-upload
            action=""
            class="upload-demo"
            :disabled="true"
            :on-preview="handlePreview"
            :file-list="payFileList">
          </el-upload>
        </el-form-item>
      </el-form>
      <h1>商品信息</h1>
      <el-table :data="orderProductTable">
        <el-table-column label="序号" align="center" type="index" width="50"/>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="商品编码">
                    <span>{{ props.row.productCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品类型">
                    <span>{{ props.row.productTypeName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="计数单位">
                    <span>{{ props.row.unitName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尺寸单位">
                    <span>{{ props.row.ccUnitName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="尺寸">
                    <span v-if="props.row.longWith || props.row.weight || props.row.height">{{ props.row.longWith + '*' + props.row.weight + '*' + props.row.height }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="重量">
                    <span>{{ props.row.zl }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="交货期（厂家）">
                    <span>{{ props.row.manufacturerDelivery }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="交货期（买家）">
                    <span>{{ props.row.delivery }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="详情">
                <span>{{ props.row.detail }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
        <el-table-column label="商品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
        <el-table-column label="生产厂家" align="center" prop="scPurchaseCompanyName"/>
        <el-table-column label="商品数量" align="center" prop="productNum"/>
        <el-table-column label="成本" align="center" prop="oldOnlyPrice"/>
        <el-table-column label="单价" align="center" prop="onlyPrice"/>
        <el-table-column label="总价" align="center" prop="allPrice"/>
        <el-table-column label="状态" align="center" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.wms_order_product_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 采购单发货对话框 -->
    <el-dialog :title="title" :visible.sync="openSend" fullscreen append-to-body>
      <el-form ref="formSend" :model="form" :rules="rules" label-width="130px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="采购单号" >
              {{orderCodeStr}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内容数量" >
              {{form.productNum}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="运费金额" prop="logisticsPrice">
              <el-input v-model="form.logisticsPrice" placeholder="请输入运费金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流条款" prop="logisticsTermsId">
              <el-select v-model="form.logisticsTermsId" filterable @change="handleTermChange" placeholder="请选择物流条款" clearable>
                <el-option
                  v-for="dict in termList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="物流方式">
              <el-radio-group v-model="form.logisticsModule">
                <el-radio
                  v-for="dict in dict.type.wms_logistics"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人" prop="consigneeIdArr">
              <el-select v-model="form.consigneeIdArr" filterable multiple placeholder="请选择收货人" clearable>
                <el-option
                  v-for="dict in userList"
                  :key="dict.userId"
                  :label="dict.nickName"
                  :value="dict.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货城市" prop="sendAddressId">
              <treeselect v-model="form.sendAddressId" :options="cityOptions" :show-count="true" placeholder="请选发货城市" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货城市" prop="deliveryAddressId">
              <treeselect v-model="form.deliveryAddressId" :options="cityOptions" :show-count="true" placeholder="请选发货城市" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货地址" prop="sendAddress">
              <el-input type="textarea" v-model="form.sendAddress" placeholder="请输入发货地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址" prop="deliveryAddress">
              <el-input type="textarea" v-model="form.deliveryAddress" placeholder="请输入收货地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="箱体编号" prop="boxCode">
              <el-input v-model="form.boxCode" placeholder="请输入箱体编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货运单号" prop="logisticsNo">
              <el-input v-model="form.logisticsNo" placeholder="请输入货运单号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
<!--            <el-form-item label="预计到货日期" prop="goodsArrivedTime">-->
<!--              <el-date-picker clearable-->
<!--                              v-model="form.goodsArrivedTime"-->
<!--                              type="date"-->
<!--                              :picker-options="pickerOptions"-->
<!--                              value-format="yyyy-MM-dd"-->
<!--                              placeholder="选择预计到货日期" style="width: 100%">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
            <el-form-item label="预计到货时间" prop="goodsArrivedDay">
              <el-input v-model="form.goodsArrivedDay" placeholder="请输入天数">
                <template slot="append">
                  天
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="清关" prop="isQg">
              <el-radio-group v-model="form.isQg" @change="handleQgChange">
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.isQg == 'Y'">
            <el-form-item label="清关公司" prop="qgEntId">
              <el-select v-model="form.qgEntId" filterable clearable placeholder="请选择清关公司">
                <el-option
                  v-for="item in entOptions"
                  :key="item.id"
                  :label="item.entName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="支付类型" prop="payType">
              <el-radio-group v-model="form.payType" @change="handlePayTypeChange">
                <el-radio
                  v-for="dict in dict.type.wms_pay_type"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="先款比例" prop="prefixPayRate" v-if="form.payType === '1'">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="form.prefixPayRate" @change="handlePrefixRate" placeholder="请输入先款比例" />
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.prefixRemark" :maxlength="255" placeholder="请输入先款备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="form.payType === '1'">
          <el-col :span="12">
            <el-form-item label="进度款比例" prop="processPayRate">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="form.processPayRate" placeholder="请输入进度款比例" />
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.processRemark" :maxlength="255" placeholder="请输入进度款备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尾款比例" prop="tailPayRate">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="form.tailPayRate" placeholder="请输入尾款比例" />
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.tailRemark" :maxlength="255" placeholder="请输入尾款备注">
                    <template slot="prepend">备注</template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="支付金额" prop="payPrice">
              <el-input v-model="form.payPrice" placeholder="请输入支付金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.payType === '1'">
            <el-form-item prop="tailPayTime">
              <template slot="label">
                尾款支付时间
                <el-tooltip class="item" effect="dark" content="货到后几天付款，0代表货到立即付款" placement="bottom">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
              <el-input v-model="form.tailPayTime" placeholder="请输入货到几天后付款" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="箱体照片">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handlePicRemove"
            :on-success="handlePiceSuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg"
            list-type="picture"
            :file-list="fileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png格式图片。</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="合同附件">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handleConteactRemove"
            :on-success="handleConteactSuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg,.pdf"
            :file-list="contractFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png/pdf格式文件。</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="支付附件">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handlePayRemove"
            :on-success="handlePaySuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg,.pdf"
            :file-list="payFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png/pdf格式文件。</span>
            </div>
          </el-upload>
        </el-form-item>
        <h1>商品信息</h1>
        <el-table :data="purchaseProductTable" @selection-change="handleContractSelectionChange">
          <el-table-column align="center" type="selection" width="50"/>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="商品编码">
                      <span>{{ props.row.productCode }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商品类型">
                      <span>{{ props.row.productTypeName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="计数单位">
                      <span>{{ props.row.unitName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="尺寸单位">
                      <span>{{ props.row.ccUnitName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="尺寸">
                      <span v-if="props.row.longWith || props.row.weight || props.row.height">{{ props.row.longWith + '*' + props.row.weight + '*' + props.row.height }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="重量">
                      <span>{{ props.row.zl }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="交货期（买家）">
                      <span>{{ props.row.delivery }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="详情">
                  <span>{{ props.row.detail }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="商品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
          <el-table-column label="生产厂家" align="center" prop="scPurchaseCompanyName" :show-overflow-tooltip="true"/>
          <el-table-column label="商品数量" align="center" prop="productNum"/>
          <el-table-column label="成本" align="center" prop="oldOnlyPrice"/>
          <el-table-column label="单价" align="center" prop="onlyPrice"/>
          <el-table-column label="总价" align="center" prop="allPrice"/>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSendForm" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 确认到货对话框 -->
    <el-dialog title="确认到货" :visible.sync="openConfirem" width="80%" append-to-body>
      <el-form ref="formArrivaed" :model="formArrivaed" :rules="rulesArrived" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="物流单号">
              {{formArrivaed.orderCode}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运费金额">
              {{formArrivaed.logisticsPrice}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货城市">
              {{formArrivaed.sendName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货城市">
              {{formArrivaed.deliveryName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货地址">
              {{formArrivaed.sendAddress}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址">
              {{formArrivaed.deliveryAddress}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="箱体编号" prop="boxCode">
              {{formArrivaed.boxCode}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货运单号" prop="logisticsNo">
              {{formArrivaed.logisticsNo}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="formArrivaed.payType === '1'">
          <el-col :span="12">
            <el-form-item label="进度款比例">
              <el-row :gutter="10">
                <el-col :span="11">
                  {{formArrivaed.processPayRate}}
                </el-col>
                <el-col :span="12">
                  备注：{{formArrivaed.processRemark}}
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尾款比例" prop="tailPayRate">
              <el-row :gutter="10">
                <el-col :span="11">
                  {{formArrivaed.tailPayRate}}
                </el-col>
                <el-col :span="12">
                  备注：{{formArrivaed.tailRemark}}
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="支付金额" v-if="formArrivaed.payType === '1'" prop="payPrice">
          <el-input v-model="formArrivaed.payPrice" placeholder="请输入支付金额" />
        </el-form-item>
        <el-form-item label="到货附件">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handlePicRemove"
            :on-success="handlePiceSuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg"
            list-type="picture"
            :file-list="fileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png格式图片。</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="支付附件" v-if="formArrivaed.payType === '1'">
          <el-upload
            class="upload-demo"
            :headers="uploadAccessory.headers"
            :action="uploadAccessory.url"
            :on-remove="handlePayRemove"
            :on-success="handlePaySuccess"
            multiple
            drag
            accept=".jpg,.png,.jpeg,.pdf"
            :file-list="payFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入jpg/png/pdf格式文件。</span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <h1>商品信息</h1>
      <el-table :data="orderProductTable">
        <el-table-column label="序号" align="center" type="index" width="50"/>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="商品编码">
                    <span>{{ props.row.productCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品类型">
                    <span>{{ props.row.productTypeName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="计数单位">
                    <span>{{ props.row.unitName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尺寸单位">
                    <span>{{ props.row.ccUnitName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="尺寸">
                    <span v-if="props.row.longWith || props.row.weight || props.row.height">{{ props.row.longWith + '*' + props.row.weight + '*' + props.row.height }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="重量">
                    <span>{{ props.row.zl }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="交货期（买家）">
                    <span>{{ props.row.delivery }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="详情">
                <span>{{ props.row.detail }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
        <el-table-column label="商品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
        <el-table-column label="生产厂家" align="center" prop="scPurchaseCompanyName" :show-overflow-tooltip="true"/>
        <el-table-column label="商品数量" align="center" prop="productNum"/>
        <el-table-column label="成本" align="center" prop="oldOnlyPrice"/>
        <el-table-column label="单价" align="center" prop="onlyPrice"/>
        <el-table-column label="总价" align="center" prop="allPrice"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitConfirmDhForm" v-loading="btnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listLogisticsOrder,
  getLogisticsOrder,
  delLogisticsOrder,
  addLogisticsOrder,
  updateLogisticsOrder,
  customsClearLogisticsOrder,
  reportErrorLogisticsOrder,
  getLogisticsError,
  handleErrorLogisticsOrder,
  getLogisticsOrderDh,
  customsConfirmLogisticsOrder
} from '@/api/wms/logisticsOrder'
import {
  getSendProduct, sendPurchaseOrder, getPurchaseOrderInfo, listPurchaseOrderBySend
} from "@/api/wms/purchaseOrder";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listCityTree} from "@/api/wms/city";
import {listEntXlk} from "@/api/wms/ent";
import {listTermsXlk} from "@/api/wms/terms";
import { delUser, logisticsUserListXlk } from '@/api/system/user'
import {getToken} from "@/utils/auth";
import selectedProduct from "@/views/wms/inquireOrder/components/selectedProduct.vue";
import {listUnitXlk} from "@/api/wms/unit";

export default {
  name: "LogisticsOrder",
  components: {selectedProduct, Treeselect},
  dicts: ['wms_logistics','wms_pay_type','wms_logistics_zz_order_status','wms_order_product_status','wms_purchase_status', 'sys_yes_no', 'wms_product_cc_unit'],
  data() {
    let checkPayRate =(rule, value, callback) =>{
      let curRate = parseFloat(this.form.prefixPayRate) + parseFloat(this.form.processPayRate)
        + parseFloat(this.form.tailPayRate)
      if (curRate > 1) {
        return callback(new Error('先款进度款尾款总额不能大于1'));
      } else {
        callback()
      }
    }
    return {
      checkPayRate: checkPayRate,
      prefix: process.env.VUE_APP_BASE_API,
      openConfirem: false,
      // 附件参数
      uploadAccessory: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/wms/logisticsOrder/uploadPic"
      },
      // 附件参数
      uploadClearAccessory: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/wms/clearOrder/uploadPic"
      },
      //按钮加载
      btnLoading: false,
      // 遮罩层
      loading: true,
      purchaseLoading: true,
      // 选中数组
      ids: [],
      // 采购单选中数组
      purchaseIds: [],
      // 发货商品
      purchaseProductTable: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      purchaseTotal: 0,
      // 物流单表格数据
      logisticsOrderList: [],
      // 采购弹窗
      purchaseOrderList: [],
      // 采购单===所需
      fileList: [],
      payFileList: [],
      contractFileList: [],
      clearFileList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 详情弹窗
      openLook: false,
      // 选择商品弹窗
      openSelectedProduct: false,
      // 上报异常弹窗
      openError: false,
      // 解除异常弹窗
      openJcError: false,
      // 清关弹窗
      openClear: false,
      // 采购发货弹窗
      openPurchaseSend: false,
      // 采购详情弹窗
      openPurchaseLook: false,
      // 发货弹窗
      openSend: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        contractCode: null,
        purchaseCode: null,
        logisticsModule: null,
        logisticsNo: null,
        payType: null,
        goodsArrivedTime: null,
        consigneeId: null,
        status: null,
        sendAddressId: null,
        deliveryAddressId: null,
        logisticsTermsId: null,
        qgEntId: null
      },
      // 查询参数
      queryParamsPurchase: {
        pageNum: 1,
        pageSize: 10
      },
      unitArr: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        prefixPayRate: [
          { required: true, message: "先款不可为空", trigger: "blur" },
          { pattern: /^(1|(0(\.\d)?))$/, message: '先款比例只能是数值最大为1或小于1的1位小数', trigger: 'blur' },
          { required: true,validator:checkPayRate, trigger: 'blur' }
        ],
        processPayRate: [
          { required: true, message: "进度款不可为空", trigger: "blur" },
          { pattern: /^(1|(0(\.\d)?))$/, message: '进度款比例只能是数值最大为1或小于1的1位小数', trigger: 'blur' },
          { required: true,validator:checkPayRate, trigger: 'blur' }
        ],
        tailPayRate: [
          { required: true, message: "尾款不可为空", trigger: "blur"},
          { pattern: /^(1|(0(\.\d)?))$/, message: '尾款比例只能是数值最大为1或小于1的1位小数', trigger: 'blur' },
          { required: true,validator:checkPayRate, trigger: 'blur'}
        ],
        tailPayTime: [
          { required: true, message: "尾款支付时间不可为空", trigger: "blur" },
          { pattern: /^([0|[1-9]{1,3})$/, message: '尾款支付时间只能是整数最大999', trigger: 'blur' }
        ],
        logisticsPrice: [
          { required: true, message: "运费不可为空", trigger: "blur" },
          { pattern: /^(0|[1-9])\d{0,8}(\.\d{1,2})?$/, message: '运费只能是数值最大9位整数2位小数', trigger: 'blur' }
        ],
        logisticsTermsId: [
          { required: true, message: "物流条款不可为空", trigger: "blur" }
        ],
        sendAddressId: [
          { required: true, message: "发货城市不可为空", trigger: "blur" }
        ],
        deliveryAddressId: [
          { required: true, message: "收货城市不可为空", trigger: "blur" }
        ],
        sendAddress: [
          { max: 255, message: '发货城市长度最多 255个字', trigger: 'blur' }
        ],
        deliveryAddress: [
          { max: 255, message: '收货城市长度最多 255个字', trigger: 'blur' }
        ],
        boxCode: [
          { max: 50, message: '箱体编号长度最多 50个字', trigger: 'blur' }
        ],
        // goodsArrivedTime: [
        //   { required: true, message: "预计到货日期不可为空", trigger: "blur" }
        // ],
        goodsArrivedDay: [
          { required: true, message: "预计到货时间不可为空", trigger: "blur" },
          { pattern: /^([0|[1-9]{1,3})$/, message: '预计到货时间只能是整数最大999', trigger: 'blur' }
        ],
        qgEntId: [
          { required: true, message: "清关公司不可为空", trigger: "blur" }
        ],
        logisticsNo: [
          { required: true, message: "货运单号不可为空", trigger: "blur" },
          { max: 50, message: '货运单号长度最多 50个字', trigger: 'blur' }
        ],
        payPrice: [
          { pattern: /^(0|[1-9])\d{0,8}(\.\d{1,2})?$/, message: '支付金额只能是数值最大9位整数2位小数', trigger: 'blur' }
        ]
      },
      // 表单校验（清关）
      rulesClear: {
        headIdArr: [
          { required: true, message: "负责人不可为空", trigger: "blur" },
        ],
        // endTime: [
        //   { required: true, message: "预计清关结束日期不可为空", trigger: "blur" },
        // ],
        endDay: [
          { required: true, message: "预计清关结束时间不可为空", trigger: "blur" },
        ],
      },
      // 城市详情
      cityOptions: [],
      // 单位详情
      entOptions: [],
      // 条款列表
      termList: [],
      // 联系人列表
      userList: [],
      // 订单号
      orderCode: '',
      // 订单商品列表
      orderProductTable: [],
      pickerOptions: {
        disabledDate(time) {
          //时间选择框必须大于今天
          return time.getTime() < Date.now() - 8.64e7;
          // 或者 return time.getTime() < Date.now();
        }
      },
      // 支付附件
      payAccessoryList: [],
      // 合同附件
      contractAccessoryList: [],
      // 箱体照片
      accessoryList: [],
      // 清关附件
      clearAccessoryList: [],
      // 商品信息列表
      products: [],
      // 商品过滤key
      filterKeys: [],
      // 商品类型集合
      productTypeOptions: [],
      // 计量单位map
      unitMap: new Map(),
      // 上报异常表单
      formError: {},
      // 清关表单
      formClear: {},
      // 确认到货表单
      formArrivaed: {},
      rulesArrived: {
        payPrice: []
      },
      // 上报异常表单验证
      rulesError: {
        preEndTime: [
          { required: true, message: "预计结束时间不可为空", trigger: "blur" }
        ]
      },
      orderCodeStr: '',
      selectedProducts: []
    };
  },
  created() {
    this.getList();
    this.getCity();
    this.getEntList();
    this.getTermList();
    this.getLogisticsUserList();
    this.getUnitList();
  },
  methods: {
    /** 查询物流单列表 */
    getList() {
      this.loading = true;
      listLogisticsOrder(this.queryParams).then(response => {
        this.logisticsOrderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询采购单列表 */
    getPurchaseList() {
      this.purchaseLoading = true;
      listPurchaseOrderBySend(this.queryParamsPurchase).then(response => {
        this.purchaseOrderList = response.rows;
        this.purchaseTotal = response.total;
        this.purchaseLoading = false;
      });
    },
    // 查询城市树
    getCity(){
      listCityTree().then(response => {
        this.cityOptions = response.data;
      })
    },
    /** 查询清关公司列表 */
    getEntList() {
      listEntXlk({entType: '2', gysType: '0'}).then(response => {
        this.entOptions = response.data;
      });
    },
    /** 查询条款列表 */
    getTermList() {
      listTermsXlk().then(response => {
        this.termList = response.data;
      });
    },
    /** 查询联系人下拉框 */
    getLogisticsUserList() {
      logisticsUserListXlk().then(response => {
        this.userList = response.data;
      });
    },
    //获取商品单位
    getUnitList(){
      listUnitXlk().then(res => {
        this.unitArr = res.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openError = false;
      this.openJcError = false;
      this.openClear = false;
      this.openPurchaseSend = false
      this.openSend = false
      this.openConfirem = false
      this.reset();
    },
    // 表单重置
    reset() {
      this.purchaseProductTable = []
      this.purchaseIds = []
      this.accessoryList = []
      this.contractAccessoryList = []
      this.payAccessoryList = []
      this.clearAccessoryList = []
      this.fileList = []
      this.contractFileList = []
      this.payFileList = []
      this.clearFileList = []
      this.selectedProducts = []

      this.products = []

      this.form = {
        orderCode: null,
        logisticsModule: '0',
        goodsArrivedDay: null,
        logisticsNo: null,
        boxCode: null,
        accessoryId: null,
        payType: '1',
        payAccessoryId: null,
        goodsArrivedTime: null,
        consigneeId: null,
        consigneeIdArr: [],
        goodsArrivedAccessoryId: null,
        sendAddress: null,
        sendAddressId: null,
        deliveryAddress: null,
        deliveryAddressId: null,
        prefixPayRate: null,
        contractAccessoryId: null,
        processPayRate: null,
        tailPayRate: null,
        tailPayTime: null,
        logisticsPrice: null,
        productNum: null,
        logisticsTermsId: null,
        logisticsTerms: null,
        qgEntId: null,
        isQg: 'Y'
      };
      this.formError = {
        preEndTime: null,
        headId: null,
        errorMsg: null,
        logisticsCode: null,
        headStr: null
      }
      this.formClear = {
        logisticsCode: null,
        headIdArr: [],
        endTime: null,
        entId: null,
        contractCode: null
      }
      this.formArrivaed = {
        logisticsCode: null,
        headIdArr: [],
        endTime: null,
        endDay: null,
        entId: null,
        contractCode: null
      }
      this.resetForm("form");
      this.resetForm("formSend");
      this.resetForm("formArrivaed");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加物流单";
    },
    /** 清关按钮操作 */
    handleUpdate(row) {
      this.reset();
      getLogisticsOrder(row.orderCode).then(response => {
        let data = response.data;
        this.orderProductTable = data.products
        this.formClear.logisticsCode = row.orderCode;
        this.formClear.goodsArrivedTime = row.goodsArrivedTime;
        this.formClear.qgEntName = row.qgEntName;
        this.formClear.entId = row.qgEntId;
        this.formClear.logisticsNo = row.logisticsNo;
        this.formClear.boxCode = row.boxCode;
        this.formClear.logisticsTerms = row.logisticsTerms;
        this.formClear.logisticsModule = row.logisticsModule;
        this.formClear.contractCode = row.contractCode;
        this.openClear = true;
      });
    },
    /** 清关按钮操作 */
    handleArrivaed(row) {
      this.reset();
      getLogisticsOrderDh(row.orderCode).then(response => {
        this.formArrivaed = response.data;
        this.formArrivaed.payPrice = null
        this.rulesArrived.payPrice = []
        if (this.formArrivaed.payType === '1') {
          this.rulesArrived.payPrice = [{ required: true, message: "支付金额不可为空", trigger: "blur" }]
        }
        this.orderProductTable = this.formArrivaed.products

        this.openConfirem = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.products.length>0) {
            let msg = ''
            let regNum = /^(0|[1-9])\d{0,6}(\.\d{0,2})?$/
            let reg = /^(0|[1-9])\d{0,6}(\.\d{0,2})?$/
            for (let i = 0; i < this.products.length; i++) {
              let item = this.products[i];
              if (!item.productName) {
                msg += "第" + (i+1) +"行格式异常，商品名称不可为空；"
              } else if (item.productName.length > 50) {
                msg += "第" + (i+1) +"行格式异常，商品名称最大长度50个字；"
              }
              if (!item.modal) {
                msg += "第" + (i+1) +"行格式异常，商品型号不可为空；"
              } else if (item.modal && item.modal.length > 50) {
                msg += "第" + (i+1) +"行格式异常，商品型号最大长度50个字；"
              }
              if (item.detail && item.detail.length > 255) {
                msg += "第" + (i+1) +"行格式异常，商品详情最大长度255个字；"
              }
              if (item.productNum) {
                if (!regNum.test(item.productNum)) {
                  msg += "第" + (i+1) +"行格式异常，商品数量只能是整数最大7位整数2位小数；"
                }
              } else {
                msg += "第" + (i+1) +"行格式异常，商品数量不能为空；"
              }
              if (item.longWith) {
                if (!reg.test(item.longWith)) {
                  msg += "第" + (i+1) +"行格式异常，商品长度只能是数值最大7位整数2位小数；"
                }
              }
              if (item.weight) {
                if (!reg.test(item.weight)) {
                  msg += "第" + (i+1) +"行格式异常，商品宽度只能是数值最大7位整数2位小数；"
                }
              }
              if (item.height) {
                if (!reg.test(item.height)) {
                  msg += "第" + (i+1) +"行格式异常，商品高度只能是数值最大7位整数2位小数；"
                }
              }
              if (item.zl) {
                if (!reg.test(item.zl)) {
                  msg += "第" + (i+1) +"行格式异常，商品重量只能是数值最大7位整数2位小数；"
                }
              }
            }
            if (msg) {
              this.$message.error(msg)
            } else {
              if (this.contractAccessoryList.length > 0) {
                if (this.payAccessoryList.length > 0 || (this.form.prefixPayRate == 0 && this.form.payType === '1')) {
                  if (this.form.payType === '0') {
                    this.form.prefixPayRate = 1
                  }
                  let curRate = parseFloat(this.form.prefixPayRate) + parseFloat(this.form.processPayRate)
                    + parseFloat(this.form.tailPayRate);
                  if (curRate == 1) {
                    this.btnLoading = true
                    this.form.productNum = this.products.length
                    this.form.products = this.products
                    this.form.accessoryList = this.accessoryList
                    this.form.payAccessoryList = this.payAccessoryList
                    this.form.contractAccessoryList = this.contractAccessoryList

                    if (this.form.orderCode) {
                      updateLogisticsOrder(this.form).then(response => {
                        this.$modal.msgSuccess("修改成功,等待重新审核");
                        this.open = false;
                        this.getList();
                      }).finally(f => {
                        this.btnLoading = false
                      });
                    } else {
                      addLogisticsOrder(this.form).then(response => {
                        this.$modal.msgSuccess("新增成功,等待审核");
                        this.open = false;
                        this.getList();
                      }).finally(f => {
                        this.btnLoading = false
                      });
                    }
                  } else {
                    this.$message.error("先款、进度款、尾款总额必须等于1！")
                  }
                } else {
                  this.$message.error("请上传支付附件！")
                }
              } else {
                this.$message.error("请上传合同附件！")
              }
            }
          } else {
            this.$modal.msgError("请选择物流商品！");
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const orderCodes = row.orderCode;
      this.$modal.confirm('是否确认删除物流单编号为"' + orderCodes + '"的数据项？').then(function() {
        return delLogisticsOrder(orderCodes);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 查看物流商品
    handleLook(row){
      this.contractAccessoryList = []
      this.payAccessoryList = []
      this.accessoryList = []
      const orderCode = row.orderCode
      this.orderCode = orderCode
      getLogisticsOrder(orderCode).then(response => {
        let data = response.data;
        this.orderProductTable = data.products
        let accessoryList = data.accessoryList
        let payAccessoryList = data.payAccessoryList
        let contractAccessoryList = data.contractAccessoryList

        if (accessoryList && accessoryList.length > 0) {
          accessoryList.forEach(item => {
            let urls = item.split("/")
            this.accessoryList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }
        if (payAccessoryList && payAccessoryList.length > 0) {
          payAccessoryList.forEach(item => {
            let urls = item.split("/")
            this.payAccessoryList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }
        if (contractAccessoryList && contractAccessoryList.length > 0) {
          contractAccessoryList.forEach(item => {
            let urls = item.split("/")
            this.contractAccessoryList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }

        this.openLook = true
      });
    },
    // 文件点击事件
    handlePreview(file){
      window.open(file.url,'_blank');
    },
    // 物流条款变更事件
    handleTermChange(val) {
      if (val){
        let term = this.termList.filter(item => item.id === val)
        this.form.logisticsTerms = term[0].name
      } else {
        this.form.logisticsTerms = null
      }
    },
    // 支付类型变更事件
    handlePayTypeChange(val) {
      if (val === '1') {
        this.form.prefixPayRate = 0
        this.form.tailPayRate = 0
        this.form.processPayRate = 0
        this.rules.prefixPayRate = [
          { required: true, message: "先款不可为空", trigger: "blur" },
          { pattern: /^(1|(0(\.\d)?))$/, message: '先款比例只能是数值最大为1或小于1的1位小数', trigger: 'blur' },
          { required: true,validator:this.checkPayRate, trigger: 'blur' }
        ]
        this.rules.processPayRate = [
          { required: true, message: "进度款不可为空", trigger: "blur" },
          { pattern: /^(1|(0(\.\d)?))$/, message: '进度款比例只能是数值最大为1或小于1的1位小数', trigger: 'blur' },
          { required: true,validator:this.checkPayRate, trigger: 'blur' }
        ]
        this.rules.tailPayRate = [
          { required: true, message: "尾款不可为空", trigger: "blur" },
          { pattern: /^(1|(0(\.\d)?))$/, message: '尾款比例只能是数值最大为1或小于1的1位小数', trigger: 'blur' },
          { required: true,validator:this.checkPayRate, trigger: 'blur' }
        ]
        this.rules.tailPayTime = [
          { required: true, message: "尾款支付时间不可为空", trigger: "blur" },
          { pattern: /^([0|[1-9]{1,3})$/, message: '尾款支付时间只能是整数最大999', trigger: 'blur' }
        ]
        this.rules.payPrice = [
          { pattern: /^(0|[1-9])\d{0,8}(\.\d{1,2})?$/, message: '支付金额只能是数值最大9位整数2位小数', trigger: 'blur' }
        ]
      } else {
        this.rules.prefixPayRate = []
        this.rules.processPayRate = []
        this.rules.tailPayRate = []
        this.rules.tailPayTime = []
        this.rules.payPrice = [
          { required: true, message: "支付金额不可为空", trigger: "blur" },
          { pattern: /^(0|[1-9])\d{0,8}(\.\d{1,2})?$/, message: '支付金额只能是数值最大9位整数2位小数', trigger: 'blur' }
        ]
      }
    },
    // 箱体照片删除
    handlePicRemove(file, fileList) {
      this.accessoryList.splice(this.accessoryList.indexOf(file.url), 1);
    },
    // 箱体照片上传成功处理
    handlePiceSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.accessoryList.push(response.imgUrl)
      }
    },
    // 合同附件删除
    handleConteactRemove(file, fileList) {
      this.contractAccessoryList.splice(this.accessoryList.indexOf(file.url), 1);
    },
    // 合同附件上传成功处理
    handleConteactSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.contractAccessoryList.push(response.imgUrl)
      }
    },
    // 支付附件删除
    handlePayRemove(file, fileList) {
      this.payAccessoryList.splice(this.payAccessoryList.indexOf(file.url), 1);
    },
    // 支付附件上传成功处理
    handlePaySuccess(response, file, fileList) {
      if (response.code == 200) {
        this.payAccessoryList.push(response.imgUrl)
      }
    },
    // 清关附件删除
    handleClearRemove(file, fileList) {
      this.clearAccessoryList.splice(this.clearAccessoryList.indexOf(file.url), 1);
    },
    // 清关附件上传成功处理
    handleClearSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.clearAccessoryList.push(response.imgUrl)
      }
    },
    // 新增订单商品
    handleOrderProductAdd(){
      this.products.push({
        productCode: null,
        productName: null,
        shortName: null,
        productNum: 0,
        ccUnit: null,
        longWith: 0,
        weight: 0,
        height: 0,
        unit: null,
        productType: null
      })
    },
    // 选择商品对话框
    handleSelectedProduct(){
      if(this.form.products) {
        this.filterKeys = this.form.products.map(e => e.productCode)
      } else {
        this.filterKeys = []
      }

      this.openSelectedProduct = true
    },
    // 提交选择的商品
    async submitSelectedProduct(){
      let selectedArr = this.$refs.selectedProduct.getSelectedProductList()
      if (selectedArr.length > 0) {
        for (let i = 0; i < selectedArr.length; i++) {
          let item = selectedArr[i]
          //获取商品单位
          if (item.productType && !this.unitMap.has(item.productType)) {
            let {data} = await listUnitXlk({productType: item.productType})
            this.unitMap.set(item.productType, data)
          }

          this.products.push({
            productCode: item.productCode,
            productName: item.productName,
            shortName: item.shortName,
            productNum: item.productNum,
            ccUnit: item.ccUnit,
            longWith: item.longWith,
            weight: item.weight,
            height: item.height,
            unit: item.unit,
            productType: item.productType
          })
        }
        this.openSelectedProduct = false
      } else {
        this.$message.error("请选择商品！")
      }
    },
    // 删除订单商品
    handleOrderProductDelete(index){
      this.products.splice(index, 1);
    },
    handleSbError(row){
      this.reset()
      this.formError.logisticsCode = row.orderCode
      this.openError = true;
    },
    handleJcError(row){
      this.reset()
      getLogisticsError(row.errorId).then(res => {
        this.formError = res.data
        this.openJcError = true;
      })
    },
    submitErrorForm(){
      this.$refs["formError"].validate(valid => {
        if (valid) {
          this.btnLoading = true
          reportErrorLogisticsOrder(this.formError).then(response => {
            this.$modal.msgSuccess("异常上报成功");
            this.openError = false;
            this.getList();
          }).finally(f => {
            this.btnLoading = false
          });
        }
      });
    },
    // 提交清关表单
    submitClearForm(){
      this.$refs["formClear"].validate(valid => {
        if (valid) {
          if (this.clearAccessoryList.length > 0) {
            this.btnLoading = true
            this.formClear.accessoryList = this.clearAccessoryList
            this.formClear.products = this.orderProductTable
            customsClearLogisticsOrder(this.formClear).then(response => {
              this.$modal.msgSuccess("清关成功，等待审核");
              this.openClear = false;
              this.getList();
            }).finally(f => {
              this.btnLoading = false
            });
          } else {
            this.$message.error("请上传清关附件！")
          }
        }
      })
    },
    submitHandleErrorForm(){
      this.btnLoading = true
      handleErrorLogisticsOrder(this.formError).then(response => {
        this.$modal.msgSuccess("异常处理成功");
        this.openJcError = false;
        this.getList();
      }).finally(f => {
        this.btnLoading = false
      });
    },
    handleRefreshAudit(row){
      this.reset()
      const orderCode = row.orderCode
      this.orderCode = orderCode
      getLogisticsOrder(orderCode).then(response => {
        let data = response.data;
        this.form = data
        this.products = data.products
        let accessoryList = data.accessoryList
        let payAccessoryList = data.payAccessoryList
        let contractAccessoryList = data.contractAccessoryList

        if (accessoryList && accessoryList.length > 0) {
          accessoryList.forEach(item => {
            let urls = item.split("/")
            this.picList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }
        if (payAccessoryList && payAccessoryList.length > 0) {
          payAccessoryList.forEach(item => {
            let urls = item.split("/")
            this.payFileList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }
        if (contractAccessoryList && contractAccessoryList.length > 0) {
          contractAccessoryList.forEach(item => {
            let urls = item.split("/")
            this.fileList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }

        this.open = true
      });
    },
    /** 发货按钮操作 */
    handleSend() {
      this.reset();
      this.openPurchaseSend = true
      this.getPurchaseList()
    },
    // 查看采购商品
    handlePurchaseLook(row){
      this.fileList = []
      this.payFileList = []
      const orderCode = row.orderCode
      this.orderCode = orderCode
      getPurchaseOrderInfo(orderCode).then(response => {
        let data = response.data;
        this.orderProductTable = data.products
        let accessoryList = data.accessoryList
        let payAccessoryList = data.payAccessoryList

        if (accessoryList && accessoryList.length > 0) {
          accessoryList.forEach(item => {
            let urls = item.split("/")
            this.fileList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }
        if (payAccessoryList && payAccessoryList.length > 0) {
          payAccessoryList.forEach(item => {
            let urls = item.split("/")
            this.payFileList.push({name: urls[urls.length - 1], url: this.prefix + item})
          })
        }

        this.openPurchaseLook = true
      });
    },
    // 提交发货按钮
    submitPurchaseSend() {
      if (this.purchaseIds.length > 0) {
        const orderCode = this.purchaseIds
        this.orderCodeStr = orderCode.join(',')
        // 查询发货商品
        getSendProduct(orderCode).then(response => {
          let data = response.data;
          this.purchaseProductTable = data.products;
          this.openSend = true;
          this.title = "发货";
        });
      } else {
        this.$modal.msgError("请先选择采购单");
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.purchaseIds = selection.map(item => item.orderCode)
    },
    // 发货选择商品
    handleContractSelectionChange(selection) {
      this.selectedProducts = selection
      this.form.productNum = selection.length
    },
    // 提交发货
    submitSendForm() {
      /** 提交发货按钮 */
      this.$refs["formSend"].validate(valid => {
        if (valid) {
          if (this.selectedProducts.length > 0) {
            if (this.contractAccessoryList.length > 0) {
              if (this.payAccessoryList.length > 0 || (this.form.prefixPayRate == 0 && this.form.payType === '1')) {
                let curRate = 1
                if (this.form.payType === '0') {
                  this.form.prefixPayRate = 1
                } else {
                  curRate = parseFloat(this.form.prefixPayRate) + parseFloat(this.form.processPayRate)
                    + parseFloat(this.form.tailPayRate);
                }
                if (curRate == 1) {
                  this.btnLoading = true
                  this.form.products = this.selectedProducts
                  this.form.accessoryList = this.accessoryList
                  this.form.payAccessoryList = this.payAccessoryList
                  this.form.contractAccessoryList = this.contractAccessoryList

                  let purCodes = []
                  let conCodes = []
                  this.selectedProducts.forEach(item => {
                    if (purCodes.indexOf(item.orderCode) === -1) {
                      purCodes.push(item.orderCode)
                    }
                    if (conCodes.indexOf(item.scContract) === -1) {
                      conCodes.push(item.scContract)
                    }
                  })
                  this.form.purchaseCode = purCodes.join(',')
                  this.form.contractCode = conCodes.join(',')
                  sendPurchaseOrder(this.form).then(response => {
                    this.$modal.msgSuccess("发货成功");
                    this.openSend = false;
                    this.openPurchaseSend = false;
                    this.getList();
                  }).finally(f => {
                    this.btnLoading = false
                  });
                } else {
                  this.$message.error("先款、进度款、尾款总额必须等于1！")
                }
              } else {
                this.$message.error("请上传支付附件！")
              }
            } else {
              this.$message.error("请上传合同附件！")
            }
          } else {
            this.$message.error("请选择发货商品！")
          }
        }
      });
    },
    // 提交确认到货
    submitConfirmDhForm() {
      /** 提交发货按钮 */
      this.$refs["formArrivaed"].validate(valid => {
        if (valid) {
          if (this.accessoryList.length > 0) {
              if ((this.payAccessoryList.length > 0 && this.formArrivaed.payType === '1') || this.formArrivaed.payType === '0') {
                  this.btnLoading = true
                  this.formArrivaed.products = this.orderProductTable
                  this.formArrivaed.payAccessoryList = this.payAccessoryList
                  this.formArrivaed.accessoryList = this.accessoryList

                  customsConfirmLogisticsOrder(this.formArrivaed).then(response => {
                    this.$modal.msgSuccess("确认收货成功");
                    this.openConfirem = false;
                    this.getList();
                  }).finally(f => {
                    this.btnLoading = false
                  });
              } else {
                this.$message.error("请上传支付附件！")
              }
          } else {
            this.$message.error("请上传到货附件！")
          }
        }
      });
    },
    handleQgChange() {
      if (this.form.isQg === 'Y') {
        this.rules.qgEntId = [
          { required: true, message: "清关公司不可为空", trigger: "blur" }
        ]
      } else {
        this.rules.qgEntId = []
      }
    },
    handlePrefixRate(val) {
      const regex = /^(1|(0(\.\d)?))$/;
      if (regex.test(val) && parseFloat(val) > 0) {
        this.rules.payPrice = [
          { required: true, message: "支付金额不可为空", trigger: "blur" },
          { pattern: /^(0|[1-9])\d{0,8}(\.\d{1,2})?$/, message: '支付金额只能是数值最大9位整数2位小数', trigger: 'blur' }
        ]
      } else {
        this.rules.payPrice = [
          { pattern: /^(0|[1-9])\d{0,8}(\.\d{1,2})?$/, message: '支付金额只能是数值最大9位整数2位小数', trigger: 'blur' }
        ]
      }
    }
  }
};
</script>
<style scoped>
.addressTitle{
  width: 68px;
  text-align: right;
  padding-right: 12px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
/deep/ .el-form-item--medium .el-form-item__content{
  line-height: 32px !important;
}

</style>
